<script setup>
import { reactive, toRefs, watch } from "vue";

import { Calculator } from "yoke_tools";
import dayjs from "dayjs";
const state = reactive({
  // 零售价
  price: undefined,
  // 模式
  model: 0,
  // 期数
  periods: 0,
  // 首付金额
  payment: undefined,
  // 租金
  periods1: 0,
  // 列表
  list: [],
  // 首付列表
  periodsList2: [],
  // 方案
  plan: 0,
  // 首付模式
  paymentMode: 0,
  // 首付比率
  paymentModeRate: 0,
  // 管理费
  managementFee: 0,
  // 是否显示管理费
  isShowManagementFee: false,
});

watch(
  () => {
    return reactive({
      price: state.price,
      plan: state.plan,
      periods1: state.periods1,
      model: state.model,
      payment: state.payment,
      periods: state.periods,
      paymentMode: state.paymentMode,
      managementFee: state.managementFee,
      paymentModeRate: state.paymentModeRate,
    });
  },
  (newState, pervState) => {
    rent1(newState);
  }
);

const typeOptions = [
  {
    label: "标准版",
    value: 3,
  },
  {
    label: "普惠版",
    value: 2,
  },
  {
    label: "超惠版",
    value: 1,
  },
];

const options = [
  {
    label: "月租模式",
    value: 1,
  },
  {
    label: "首付模式",
    value: 2,
  },
];

const periodsObj = {
  12: [3, 4, 5],
  9: [3, 4],
  6: [2],
};

const options1 = [
  {
    label: "首付金额",
    value: 1,
  },
  {
    label: "首付比率",
    value: 2,
  },
];

// 首付模式
const periodsList1 = [4, 5, 6, 9, 12]?.map((el, index) => ({
  label: el + "期",
  value: el,
}));

// 低息
const coefficients = [
  {
    key: 12,
    key1: 3,
    value: 8.922,
  },
  {
    key: 12,
    key1: 4,
    value: 9.404,
  },
  {
    key: 12,
    key1: 5,
    value: 9.86,
  },
  {
    key: 9,
    key1: 3,
    value: 7.286,
  },
  {
    key: 9,
    key1: 4,
    value: 7.677,
  },
  {
    key: 6,
    key1: 2,
    value: 5.03,
  },
];
// 超惠
const coefficients1 = [
  {
    key: 12,
    key1: 3,
    value: 9.081,
  },
  {
    key: 12,
    key1: 4,
    value: 9.556,
  },
  {
    key: 12,
    key1: 5,
    value: 10.0,
  },
  {
    key: 9,
    key1: 3,
    value: 7.412,
  },
  {
    key: 9,
    key1: 4,
    value: 7.788,
  },
  {
    key: 6,
    key1: 2,
    value: 5.125,
  },
];
// 标准
const coefficients3 = [
  {
    key: 12,
    key1: 3,
    value: 8.626,
  },
  {
    key: 12,
    key1: 4,
    value: 9.128,
  },
  {
    key: 12,
    key1: 5,
    value: 9.606,
  },
  {
    key: 9,
    key1: 3,
    value: 7.055,
  },
  {
    key: 9,
    key1: 4,
    value: 7.472,
  },
  {
    key: 6,
    key1: 2,
    value: 4.857,
  },
];
// [
//   {
//     key: 12,
//     key1: 3,
//     value: 8.92,
//   },
//   {
//     key: 12,
//     key1: 4,
//     value: 9.4,
//   },
//   {
//     key: 12,
//     key1: 5,
//     value: 9.85,
//   },
//   {
//     key: 9,
//     key1: 3,
//     value: 7.28,
//   },
//   {
//     key: 9,
//     key1: 4,
//     value: 7.67,
//   },
//   {
//     key: 6,
//     key1: 2,
//     value: 5.03,
//   },
// ]

// 计算租金
const rent1 = (state1) => {
  if (!state1.plan) return;
  if (!state1.periods) return;
  if (!state1.price) {
    state.list = [];
    state.managementFee = 0;
    return;
  }
  if (!state1.paymentMode) return;

  let payment = state1.payment;
  if (state.paymentMode == 2) {
    const rent = new Calculator()
      .multiply(state1.price, state1.paymentModeRate / 100)
      .getResult();
    if ((rent * 1).toFixed(0)) {
      payment = (rent * 1).toFixed(0);
    }
  }

  if (!payment) return;

  //  租金
  let rents = 0;

  // 超惠方案
  if (state1.plan === 1) {
    // 计算租金new
    const num = new Calculator().subtract(state1.price, payment).getResult(); // 售价 - 首付
    const num1 = new Calculator().multiply(0.04, state1.periods).getResult(); // 0.04 * 期数
    const num2 = new Calculator().add(1.08).add(num1).getResult(); // 1.06 + ( 0.04 * 期数 )
    const num3 = new Calculator().subtract(state1.periods, 1).getResult(); // 期数 - 1
    const rent = new Calculator().multiply(num, num2).divide(num3).getResult(); // 售价 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
    // 最终公式：售价 - 首付 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
    rents = rent;
    const list = [...Array(state1.periods).keys()].map((el, index) => {
      if (index == 0) {
        return {
          label: "首付款",
          value: Math.ceil(payment),
          time: dayjs(Date.now()).format("YYYY-MM-DD"),
        };
      }
      return {
        label: "第" + (index + 1) + "期",
        value: (rent * 1).toFixed(0),
        time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
      };
    });
    state.list = list;
  }

  // 低息方案
  if (state1.plan === 2) {
    // 计算租金
    const num = new Calculator().subtract(state1.price, payment).getResult();
    const num1 = new Calculator()
      .add(1.12, new Calculator().multiply(state1.periods, 0.04).getResult())
      .getResult();
    const num2 = new Calculator().subtract(state1.periods, 1).getResult();
    // 最终公式：(零售价 - 首付) * (1.12 + 租期 * 0.04) / (租期 - 1)
    const rent = new Calculator().multiply(num, num1).divide(num2).getResult();
    // 最终公式：((售价-首付)* 1 * 4% + 4%) + 200 ) / (租期 - 1)
    // const rent = new Calculator().multiply(num, num1).add(200).divide(num2).getResult();
    rents = rent;
    const list = [...Array(state1.periods).keys()].map((el, index) => {
      if (index == 0) {
        return {
          label: "首付款",
          value: Math.ceil(payment),
          time: dayjs(Date.now()).format("YYYY-MM-DD"),
        };
      }
      return {
        label: "第" + (index + 1) + "期",
        value: (rent * 1).toFixed(0),
        time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
      };
    });
    state.list = list;
  }

  // 标准方案
  if (state1.plan === 3) {
    // 计算租金
    const num = new Calculator().subtract(state1.price, payment).getResult(); // 售价 - 首付
    const num1 = new Calculator().multiply(0.04, state1.periods).getResult(); // 0.04 * 期数
    const num2 = new Calculator().add(1.2).add(num1).getResult(); // 1.06 + ( 0.04 * 期数 )
    const num3 = new Calculator().subtract(state1.periods, 1).getResult(); // 期数 - 1
    const rent = new Calculator().multiply(num, num2).divide(num3).getResult(); // 售价 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
    // 最终公式：售价 - 首付 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
    rents = rent;
    const list = [...Array(state1.periods).keys()].map((el, index) => {
      if (index == 0) {
        return {
          label: "首付款",
          value: Math.ceil(payment),
          time: dayjs(Date.now()).format("YYYY-MM-DD"),
        };
      }
      return {
        label: "第" + (index + 1) + "期",
        value: (rent * 1).toFixed(0),
        time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
      };
    });
    state.list = list;
  }

  // 计算管理费
  const num = new Calculator().subtract(state1.periods, 1).getResult();
  const num2 = new Calculator()
    .multiply((rents * 1).toFixed(0), num)
    .getResult();
  const num1 = new Calculator()
    .add(payment)
    .add(num2)
    .subtract(state1.price)
    .getResult();
  state.managementFee = (num1 * 1).toFixed(0);
};

// 计算租金
const rent = () => {
  console.log(state);
  if (!state.plan) return;
  if (!state.periods) return alert("请选择租赁期数");
  if (!state.price) return alert("请输入设备零售价");
  if (!state.paymentMode) return alert("请选择首付模式");

  let payment = state.payment;

  if (!payment) return alert("首付金额不能为空");

  //  租金
  let rents = 0;

  // 超惠方案
  if (state.plan === 1) {
    // 计算租金new
    const num = new Calculator().subtract(state.price, payment).getResult(); // 售价 - 首付
    const num1 = new Calculator().multiply(0.04, state.periods).getResult(); // 0.04 * 期数
    const num2 = new Calculator().add(1.08).add(num1).getResult(); // 1.06 + ( 0.04 * 期数 )
    const num3 = new Calculator().subtract(state.periods, 1).getResult(); // 期数 - 1
    const rent = new Calculator().multiply(num, num2).divide(num3).getResult(); // 售价 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
    // 最终公式：售价 - 首付 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
    rents = rent;
    const list = [...Array(state.periods).keys()].map((el, index) => {
      if (index == 0) {
        return {
          label: "首付款",
          value: Math.ceil(payment),
          time: dayjs(Date.now()).format("YYYY-MM-DD"),
        };
      }
      return {
        label: "第" + (index + 1) + "期",
        value: (rent * 1).toFixed(0),
        time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
      };
    });
    state.list = list;
  }

  // 低息方案
  if (state.plan === 2) {
    // 计算租金
    const num = new Calculator().subtract(state.price, payment).getResult();
    const num1 = new Calculator()
      .add(1.12, new Calculator().multiply(state.periods, 0.04).getResult())
      .getResult();
    const num2 = new Calculator().subtract(state.periods, 1).getResult();
    // 最终公式：(零售价 - 首付) * (1.12 + 租期 * 0.04) / (租期 - 1)
    const rent = new Calculator().multiply(num, num1).divide(num2).getResult();
    // 最终公式：((售价-首付)* 1 * 4% + 4%) + 200 ) / (租期 - 1)
    // const rent = new Calculator().multiply(num, num1).add(200).divide(num2).getResult();
    rents = rent;
    const list = [...Array(state.periods).keys()].map((el, index) => {
      if (index == 0) {
        return {
          label: "首付款",
          value: Math.ceil(payment),
          time: dayjs(Date.now()).format("YYYY-MM-DD"),
        };
      }
      return {
        label: "第" + (index + 1) + "期",
        value: (rent * 1).toFixed(0),
        time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
      };
    });
    state.list = list;
  }

  // 标准方案
  if (state.plan === 3) {
    // 计算租金
    const num = new Calculator().subtract(state.price, payment).getResult(); // 售价 - 首付
    const num1 = new Calculator().multiply(0.04, state.periods).getResult(); // 0.04 * 期数
    const num2 = new Calculator().add(1.2).add(num1).getResult(); // 1.06 + ( 0.04 * 期数 )
    const num3 = new Calculator().subtract(state.periods, 1).getResult(); // 期数 - 1
    const rent = new Calculator().multiply(num, num2).divide(num3).getResult(); // 售价 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
    // 最终公式：售价 - 首付 * （ 1.06 + ( 0.04 * 期数 ) ） / （期数 - 1）
    rents = rent;
    const list = [...Array(state.periods).keys()].map((el, index) => {
      if (index == 0) {
        return {
          label: "首付款",
          value: Math.ceil(payment),
          time: dayjs(Date.now()).format("YYYY-MM-DD"),
        };
      }
      return {
        label: "第" + (index + 1) + "期",
        value: (rent * 1).toFixed(0),
        time: dayjs(Date.now()).add(index, "M").format("YYYY-MM-DD"),
      };
    });
    state.list = list;
  }

  // 计算管理费
  const num = new Calculator().subtract(state.periods, 1).getResult();
  const num2 = new Calculator()
    .multiply((rents * 1).toFixed(0), num)
    .getResult();
  const num1 = new Calculator()
    .add(payment)
    .add(num2)
    .subtract(state.price)
    .getResult();
  state.managementFee = (num1 * 1).toFixed(0);
};

const change = () => {
  if (!state.price) return alert("请输入设备价格");
  const rent = new Calculator()
    .multiply(state.price, state.paymentModeRate / 100)
    .getResult();
  state.payment = (rent * 1).toFixed(0);
};

const {
  price,
  model,
  periods,
  payment,
  paymentMode,
  paymentModeRate,
  plan,
  isShowManagementFee,
  managementFee,
} = toRefs(state);
document.title = "租金计算器";
</script>

<template>
  <div class="container">
    <div class="logo">
      <img src="../assets/icon.svg" alt="" />
      <!-- <span class="title">租租机</span> -->
      <b class="title_sub" @click="() => console.log(state)">租金计算器</b>
    </div>

    <div class="form">
      <div class="for_title">输入设备价格,租期,押金比例!</div>

      <div class="select">
        <select class="inp inp_1" v-model="plan">
          <option class="inp_2" :value="0" disabled selected>
            请选择租赁模式
          </option>
          <option
            v-for="item in typeOptions"
            :key="item.value"
            :value="item.value"
          >
            {{ item.label }}
          </option>
        </select>
      </div>
      <div class="select select_w">
        <input
          class="inp inp_w"
          type="number"
          placeholder="请输入设备零售价"
          v-model="price"
        />
        <div class="text">零售价</div>
      </div>

      <!-- <div class="select">
        <select
          class="inp inp_1"
          v-model="model"
          @change="
            () => {
              state.periods = 0;
            }
          "
        >
          <option class="inp_2" :value="0" disabled selected>请输入租赁方式</option>
          <option v-for="item in options" :key="item.value" :value="item.value">
            {{ item.label }}
          </option>
        </select>
      </div> -->

      <div class="select select_w">
        <select class="inp inp_w inp_1" v-model="periods">
          <option class="inp_2" :value="0" selected>选择分期期数</option>
          <option
            v-for="item in periodsList1"
            :key="'else-' + item.value"
            :value="item.value"
          >
            {{ item.label }}
          </option>
        </select>
        <div class="text">总期数</div>
      </div>

      <div class="select">
        <select class="inp inp_1" v-model="paymentMode">
          <option class="inp_2" :value="0" disabled selected>首付模式</option>
          <option
            v-for="item in options1"
            :key="'else-' + item.value"
            :value="item.value"
          >
            {{ item.label }}
          </option>
        </select>
      </div>

      <div v-if="paymentMode == 2" class="select select_w">
        <select
          class="inp inp_w inp_1"
          v-model="paymentModeRate"
          @change="change"
        >
          <option class="inp_2" :value="0" disabled selected>
            请选择首付比率
          </option>
          <option :value="20">20%</option>
          <option :value="25">25%</option>
          <option :value="30">30%</option>
          <option :value="35">35%</option>
          <option :value="40">40%</option>
          <option :value="45">45%</option>
          <option :value="50">50%</option>
          <option :value="55">55%</option>
          <option :value="60">60%</option>
        </select>
        <span class="text">首付比率</span>
      </div>

      <input
        v-if="paymentMode == 1"
        class="inp number"
        type="number"
        placeholder="请输入首付金额"
        v-model="payment"
      />

      <button class="inp btn" @click="rent">立即计算</button>
    </div>
    <div class="ment btn_1">
      <button
        class="inp btn"
        @click="isShowManagementFee = !isShowManagementFee"
      >
        {{ isShowManagementFee ? "隐藏" : "显示" }}更多
      </button>
    </div>
    <div class="ment" v-if="isShowManagementFee">
      <span class="title">管理费</span>
      <span class="value">{{ managementFee }}</span>
    </div>

    <div class="table">
      <div class="th">
        <div>期数</div>
        <div>付款日</div>
        <div>租金</div>
      </div>
      <div>
        <div class="th tr" v-for="(item, index) in state.list" :key="index">
          <div>{{ item.label }}</div>
          <div>{{ item.time }}</div>
          <div>{{ item.value + "元" }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="less">
.ment {
  padding: 0 4vw;
  margin: 8px 0;

  .value {
    margin-left: 12px;
  }
}

.table {
  margin-top: 15px;
  padding: 0 4vw;
  padding-bottom: 15px;
}

.th {
  display: flex;
  height: 40px;
  align-items: center;

  > div {
    flex: 1;
    text-align: center;
    color: #666;
    font-size: 14px;
  }
}

.tr {
  height: 40px;
  background: #fff;
  border-bottom: 1px solid #ccc;

  > div {
    color: #999;
  }

  &:last-child {
    border: 0;
  }
}

.container {
  margin: 0;
  background: #f2f2f2;
  width: 100vw;
  height: max-content;
  min-height: 100vh;
}

.logo {
  padding-top: 40px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.title {
  color: #666;
}

.title_sub {
  margin-top: 10px;
  color: #444;
}

.form {
  padding: 0 4vw;
}

.for_title {
  color: #666;
  margin-top: 15px;
  font-size: 13px;
}

.inp {
  border: 0;
  outline: none;
  width: 100%;
  height: 40px;
  text-indent: 1em;
  background: #fff;
}

.inp_1 {
  color: #777;
  text-indent: 0.8em;
}

.number {
  margin-top: 15px;
}

.select {
  padding-right: 1vw;
  background: #fff;
  margin-top: 15px;
}

.inp_2 {
  display: none;
}

.btn {
  background: #429588;
  margin-top: 15px;
  color: #fff;
  font-size: 16px;
}

.select_w {
  display: flex;
  align-items: center;

  .text {
    font-size: 14px;
    color: #429588;
    margin-left: 10px;
  }

  .inp_w {
    width: auto;
    flex: 1;
  }
}

.btn_1 {
  margin-top: 0px;
}
</style>
